@import 'convoMsgs';

.msg-app {
  &__convo {
    @extend %flex-column;

    flex: 1 1 100%;

    @include breakpoint($mq-not-small) {
      flex: 1 0 100%;
      display: none;

      .pane-convo & {
        display: flex;
      }
    }

    &__head {
      @extend %flex-between-nowrap;

      flex: 0 0 $msg-top-height;
      background: $c-bg-zebra2;
      border-bottom: $border;

      &__left {
        @extend %flex-center-nowrap;

        height: 100%;
        align-items: stretch;
      }

      &__back {
        @extend %flex-center;

        color: $c-font-dim;
        padding: 0 1em;
        font-size: 1.5em;

        @include breakpoint($mq-small) {
          display: none;
        }
      }

      .user-link {
        @extend %flex-center-nowrap;

        flex: 0 0 auto;
        color: $c-font-clear;
        font-size: 1.4em;

        .utitle {
          margin-right: 0.7ch;
        }

        .line {
          flex: 0 0 auto;
          font-size: 1.5em;
        }
      }

      &__actions {
        @extend %flex-center-nowrap;

        margin-right: 1.2em;
      }
    }

    &__action {
      &.button {
        color: $c-font;

        &.bad:hover {
          color: $c-bad;
        }
      }

      &__sep {
        color: $c-font-dimmer;
        margin: 0 0.5em;
      }
    }

    &__reply {
      @extend %flex-center-nowrap;

      flex: 0 0 auto;
      background: $c-bg-zebra2;
      border-top: $border;
      padding: 1em 2em;

      &__block {
        flex: 1 1 auto;
        text-align: center;
        margin: 0.6em;
      }
    }

    &__post {
      @extend %flex-center-nowrap;

      flex: 1 1 100%;

      &__text {
        @extend %msg-input-focus;

        flex: 1 1 100%;
        border-radius: 1.5em;
        background: $c-bg-box;
        resize: none;
      }

      &__submit {
        outline: 0;
        margin-left: 1em;
        border-radius: 99px;
        background: $c-font-dimmer;

        &.connected,
        &.connected:hover {
          background: $c-msg;
        }
      }
    }

    @include breakpoint($mq-not-xx-small) {
      &__head__back {
        padding: 0 0.5em;
      }

      .user-link {
        font-size: 1.2em;

        .line,
        .utitle {
          display: none;
        }
      }

      &__action__sep,
      .play {
        display: none;
      }
    }
  }
}
